<template>
  <div class="editor-layer">
    <el-table-draggable @drop="handleDrop">
      <el-table
        id="editor-layer-table"
        :data="root.doms"
        style="width: 100%"
        size="mini"
      >
        <el-table-column
          label="图层"
          type="index"
          :index="createIndex"
          width="180"
        >
          <template #default="{ row, $index }">
            <div class="layer-item" @click="root.setDomIndex($index)">
              <div class="layer-image" style="position: relative">
                <el-image
                  style="width: 50px; height: 50px"
                  :src="
                    row.link_image ? baseUrl + row.link_image : row._link_image
                  "
                  fit="cover"
                ></el-image>
                <span class="layer-sort">{{ $index + 1 }}</span>
              </div>
              <div class="layer-functions">
                <el-tooltip effect="dark" content="隐藏" placement="top">
                  <vab-icon icon="eye" class="functions-btn"></vab-icon>
                </el-tooltip>
                <el-tooltip effect="dark" content="删除" placement="top">
                  <vab-icon
                    icon="trash-alt"
                    class="functions-btn"
                    @click="handleDelete($index)"
                  ></vab-icon>
                </el-tooltip>
                <el-tooltip effect="dark" content="下载图片" placement="top">
                  <vab-icon icon="arrow-down" class="functions-btn"></vab-icon>
                </el-tooltip>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-table-draggable>
  </div>
</template>

<script>
  import mixin from '@/views/editor/mixin.js'
  import ElTableDraggable from 'element-ui-el-table-draggable'
  export default {
    name: 'Layer',
    components: {
      ElTableDraggable,
    },
    mixins: [mixin],
    data() {
      return {
        root: {
          doms: [],
        },
      }
    },
    computed: {
      baseUrl() {
        return this.root.baseUrl
      },
      doms() {
        return this.root.doms
      },
      dom() {
        return this.root.dom
      },
    },
    methods: {
      createIndex(index) {
        console.log('c', index)
        return index
      },
      handleRowClick(row, col) {
        console.log(col.index)
      },
      handleDrop({ targetObject }) {
        this.root.reSortDoms(targetObject.sort - 1)
      },
      handleDelete(index) {
        this.$baseConfirm('你确定要删除该元素吗?', null, () => {
          this.root.deleteDom(index)
        })
      },
    },
  }
</script>

<style scoped>
  .editor-layer {
    width: 180px;
    position: absolute;
    left: 50px;
    top: 0px;
    right: 0;
    bottom: 0;
    overflow: auto;
    background-color: #fff;
  }

  .functions-btn {
    margin: 0 5px;
    font-size: 18px;
    cursor: pointer;
  }

  /* .editor-layer >>> .el-table__row {
    background: #2a3f54 !important;
  }

  .editor-layer >>> .el-table_1_column_1 {
    border-bottom: 1px solid #425668;
  } */

  .layer-item {
    display: flex;
    cursor: move;
  }

  .layer-image {
    flex: 1;
  }
  .layer-functions {
    padding-top: 6px;
    flex: 1;
  }

  .layer-sort {
    position: absolute;
    left: 36px;
    top: 15px;
    font-weight: 700;
    color: #fff;
    font-size: 20px;
    text-shadow: 0 0 10px #333;
  }
</style>
